<template>
  <div>
    <div v-if="listShow">
      <el-form :inline="true" :model="fm" class="demo-form-inline" size="mini">
        <el-form-item>
          <el-input v-model="fm.name" placeholder="楼盘名称/楼盘地址" style="width: 200px" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="fm.premisesType" placeholder="请选择物业类型" clearable style="width: 100%">
            <el-option label="普通住宅" value="1">普通住宅</el-option>
            <el-option label="公寓" value="2">公寓</el-option>
            <el-option label="商住两用" value="3">商住两用</el-option>
            <el-option label="商业地产" value="4">商业地产</el-option>
            <el-option label="写字楼" value="5">写字楼</el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="province" :inline-message="true">
          <el-select v-model="fm.province" placeholder="省" clearable @change="shch">
            <el-option
              v-for="item in slist"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="city" :inline-message="true">
          <el-select v-model="fm.city" placeholder="市" clearable @change="quch">
            <el-option
              v-for="item in citys"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="county" :inline-message="true">
          <el-select v-model="fm.county" placeholder="区" clearable @change="handleCircle">
            <el-option
              v-for="item in countrys"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="getListAll">搜索</el-button>
          <el-button type="warning" @click="handleInputPre">新增楼盘</el-button>
          <el-button type="warning" @click="handleToUpdate">查看详情</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="preTable"
        v-loading="loadding"
        highlight-current-row
        :data="tableData"
        style="width: 100%"
        @current-change="handleRowIndex"
      >
        <el-table-column
          prop="id"
          label="楼盘ID"
          width="180"
        />
        <el-table-column
          prop="name"
          label="楼盘名称"
        />
        <el-table-column
          label="楼盘图片"
        >
          <template v-slot="scope">
            <div v-for="item in scope.row.imageUrl" :key="item.id" align="left" style="width:10px;display: flex;">
              <el-popover
                style="display: flex"
                placement="top-end"
                trigger="hover"
              >
                <el-image :src="item.url" style="width: 200px;" :fit="fit" />
                <el-icon slot="reference" class="el-icon-picture-outline" />
              </el-popover>
            </div>
          </template>
          <template />
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="estate"
          label="物业管理公司"
        />
        <el-table-column
          label="地图地址"
        >
          <template v-slot="scope">
            <el-button type="text" @click="openMap(scope.row)">查看地图地址</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="fm.pageNum"
        :page-sizes="[15, 30, 45]"
        :page-size="fm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="fm.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        :visible.sync="mapDialog"
        width="70%"
      >
        <baidu-map class="bm-view" ak="ZoBKG4QXIkp2a6gdXPd2rQYf2dme8558" :center="center" :zoom="zoom" @ready="handler">
          <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-marker
            :position="pointIndex"
            :dragging="false"
            animation="BMAP_ANIMATION_BOUNCE"
          />
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
        </baidu-map>
      </el-dialog>

    </div>
    <div v-if="updShow">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div style="padding-left: 300px">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" size="mini">
              <el-form-item label="楼盘名称" prop="name" :inline-message="true">
                <el-input v-model="ruleForm.name" placeholder="楼盘名称" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="楼盘地址" prop="address" :inline-message="true">
                <el-input v-model="ruleForm.address" placeholder="楼盘地址" style="width: 300px" />
              </el-form-item>
              <el-form-item label="城市地区" prop="province" :inline-message="true">
                <el-select v-model="ruleForm.province" placeholder="省" @change="shch">
                  <el-option
                    v-for="item in slist"
                    :key="item.regionId"
                    :label="item.regionName"
                    :value="item.regionId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="city" :inline-message="true">
                <el-select v-model="ruleForm.city" placeholder="市" @change="quch">
                  <el-option
                    v-for="item in citys"
                    :key="item.regionId"
                    :label="item.regionName"
                    :value="item.regionId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="county" :inline-message="true">
                <el-select v-model="ruleForm.county" placeholder="区" @change="handleCircle">
                  <el-option
                    v-for="item in countrys"
                    :key="item.regionId"
                    :label="item.regionName"
                    :value="item.regionId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="商圈">
                <el-checkbox-group v-model="ruleForm.sq">
                  <el-checkbox v-for="city in circleList" :key="city.id" :label="city.id" :value="city.id">{{ city.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="地铁">
                <el-checkbox-group v-model="ruleForm.subways">
                  <el-checkbox v-for="subway in subwayList" :key="subway.id" :label="subway.id" :value="subway.id">{{ subway.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="建筑面积">
                <el-input v-model="ruleForm.proportion" placeholder="建筑面积" style="width: 200px" />平方米
              </el-form-item>
              <el-form-item label="建筑类型">
                <el-checkbox-group v-model="ruleForm.buildingTypes">
                  <el-checkbox label="1" name="1">平房</el-checkbox>
                  <el-checkbox label="2" name="2">塔楼</el-checkbox>
                  <el-checkbox label="3" name="3">塔楼结合</el-checkbox>
                  <el-checkbox label="4" name="4">底层</el-checkbox>
                  <el-checkbox label="5" name="5">多层</el-checkbox>
                  <el-checkbox label="6" name="6">高层</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="社区类型" style="width: 200px">
                <el-select v-model="ruleForm.communityType" placeholder="请选择社区类型">
                  <el-option label="经济社区" value="1">经济社区</el-option>
                  <el-option label="政治社区" value="2">政治社区</el-option>
                  <el-option label="文化社区" value="3">文化社区</el-option>
                  <el-option label="军事社区" value="4">军事社区</el-option>
                  <el-option label="特殊社区" value="5">特殊社区</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="物业类型">
                <el-checkbox-group v-model="ruleForm.premisesTypes">
                  <el-checkbox label="1" name="1">普通住宅</el-checkbox>
                  <el-checkbox label="2" name="2">公寓</el-checkbox>
                  <el-checkbox label="3" name="3">商住两用</el-checkbox>
                  <el-checkbox label="4" name="4">商业地产</el-checkbox>
                  <el-checkbox label="5" name="5">写字楼</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="楼盘特色">
                <el-checkbox-group v-model="ruleForm.property">
                  <el-checkbox v-for="subway in characterList" :key="subway.id" :label="subway.id">{{ subway.premisesProperty }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="容积率">
                <el-input v-model="ruleForm.grossPlotRatio" placeholder="容积率" style="width: 200px" />平方米
              </el-form-item>
              <el-form-item label="得房率">
                <el-input v-model="ruleForm.efficiency" placeholder="得房率" style="width: 200px" />%
              </el-form-item>
              <el-form-item label="绿化率">
                <el-input v-model="ruleForm.greenCoverage" placeholder="绿化率" style="width: 200px" />%
              </el-form-item>
              <el-form-item label="楼栋数">
                <el-input v-model="ruleForm.buildingCount" placeholder="楼栋数" style="width: 200px" />栋
              </el-form-item>
              <el-form-item label="开发商">
                <el-input v-model="ruleForm.developer" placeholder="开发商" style="width: 400px" />
              </el-form-item>
              <el-form-item label="物业管理公司">
                <el-input v-model="ruleForm.estate" placeholder="物业管理公司" style="width: 400px" />
              </el-form-item>
              <el-form-item label="楼盘地址">
                经度：<el-input v-model="ruleForm.longItude" readonly style="width: 200px" />
                纬度：<el-input v-model="ruleForm.latItude" readonly style="width: 200px" />
                <el-button @click="updMapDialog=true">点击选择</el-button>
              </el-form-item>
              <el-form-item label="楼盘简介">
                <el-input v-model="ruleForm.introduce" style="width: 500px" type="textarea" :rows="2" placeholder="楼盘简介" />
              </el-form-item>
              <el-form-item label="周边配套">
                <el-button icon="el-icon-plus" type="warning" @click="addDomain">新 增</el-button>
              </el-form-item>
              <el-form-item
                v-for="(domain, index) in ruleForm.domains"
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
              >
                标题：<el-input v-model="domain.value" style="width: 200px;" />
                内容：<el-input v-model="domain.content" style="width: 200px;" />
                <el-button type="danger" icon="el-icon-minus" @click.prevent="removeDomain(domain)" />
              </el-form-item>
              <el-form-item label="交通情况">
                <el-button icon="el-icon-plus" type="warning" @click="addSubway">新 增</el-button>
              </el-form-item>
              <el-form-item
                v-for="(domain, index) in ruleForm.subwayStatus"
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
              >
                标题：<el-input v-model="domain.value" style="width: 200px;" />
                内容：<el-input v-model="domain.content" style="width: 200px;" />
                <el-button type="danger" icon="el-icon-minus" @click.prevent="removeSubway(domain)" />
              </el-form-item>
              <el-form-item>
                <!--            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="相册管理" name="second">
          <div style="padding-left: 50px">
            <div v-for="item in ablums" :key="item.id">
              <h3>{{ item.albumType }}：</h3>
              <div class="uplDiv" @click="getAlbumIndex(item.id)">
                <el-upload
                  action="http://localhost:8200/hou/upload/pic"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <el-input v-model="ruleForm.imageUrl[item.id]" hidden />
                  <img width="100%" :src="ruleForm.imageUrl" alt="">
                </el-dialog>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div align="center">
        <el-button type="warning" @click="handleGoBack">返回</el-button>
<!--        <el-button slot="reference" type="warning" size="mini" @click="submitForm('ruleForm')">提交</el-button>-->
      </div>
    </div>

    <el-dialog
      :visible.sync="updMapDialog"
      width="70%"
    >
      <baidu-map class="bm-view" ak="ZoBKG4QXIkp2a6gdXPd2rQYf2dme8558" :center="updCenter" :zoom="updZoom" @ready="handler">
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" @dblclick="getIndex">
          <bm-label content="双击选择" :label-style="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}" />
        </bm-marker>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
      </baidu-map>
    </el-dialog>

  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue' // 百度地图组件
import BmMarker from 'vue-baidu-map/components/overlays/Marker' // 点
import BmScale from 'vue-baidu-map/components/controls/Scale' // 缩放
import BmNavigation from 'vue-baidu-map/components/controls/Navigation' // 比例尺
import BmCityList from 'vue-baidu-map/components/controls/CityList' // 城市列表

import axios from 'axios'

export default {
  name: 'PreList',
  components: {
    BaiduMap,
    BmMarker,
    BmScale,
    BmNavigation,
    BmCityList
  },
  data() {
    return {
      updCenter: { lng: 116.404, lat: 39.915 },
      updZoom: 15,
      updMapDialog: false,
      ruleForm: {
        subways: [],
        sq: [],
        buildingTypes: [],
        property: [],
        premisesTypes: [],
        subwayStatus: [{
          value: '',
          content: '',
          key: '',
          type: 1
        }],
        domains: [{
          value: '',
          content: '',
          key: '',
          type: 0
        }]
      },
      activeName: 'first',
      listShow: true,
      updShow: false,
      updDialog: false,
      mapIF: false,
      circleList: [],
      subwayList: [],
      pointIndex: {
        lng: '',
        lat: ''
      },
      slist: [],
      citys: [],
      countrys: [],
      center: { lng: 0, lat: 0 },
      zoom: 3,
      mapDialog: false,
      loadding: false,
      tableData: [],
      fm: {
        pageNum: 1,
        pageSize: 15
      },
      currentRow: null,
      characterList: [],
      rules: {
        name: [
          { required: true, message: '请输入楼盘名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入楼盘地址', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        county: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    axios.get('http://localhost:8200/sys/region/getArea?pid=' + 1).then((response) => {
      this.slist = response.data.obj
      console.log('slist:{}' + JSON.stringify(this.slist))
    })
    this.getListAll()
    this.getCharacteristic()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert(JSON.stringify(this.ruleForm.imageUrl))
          if (this.ruleForm.imageUrl.length <= 0) {
            // this.dialogVisible=true;
            this.$confirm('当前未上传图片, 是否继续?', {
              confirmButtonText: '上传图片',
              cancelButtonText: '继续添加',
              type: 'warning'
            }).then(() => {
              this.activeName = 'second'
            }).catch(() => {

            })
            // eslint-disable-next-line no-empty
          } else {
          }
          console.log(this.ruleForm)
        } else {
          this.$message({
            message: '请输入!',
            type: 'error'
          })
          return false
        }
      })
    },
    getIndex(e) {
      console.log('经度:' + e.point.lng)
      console.log('纬度:' + e.point.lat)
      this.ruleForm.longItude = e.point.lng
      this.ruleForm.latItude = e.point.lat
      this.updMapDialog = false
      this.$message({
        message: '选择成功',
        type: 'success'
      })
      /* console.log("type:"+type)
      console.log("target:"+target)
      console.log("lat:"+point.lat)
      console.log("pixel:"+pixel)*/
    },
    /**
     * 交通情况
     *
     * */
    addSubway() {
      this.ruleForm.subwayStatus.push({
        value: '',
        content: '',
        key: Date.now(),
        type: 1
      })
    },
    removeSubway(item) {
      var index = this.ruleForm.subwayStatus.indexOf(item)
      if (this.ruleForm.subwayStatus.length <= 1) {
        this.$message({
          message: '请至少保留一条',
          type: 'warning'
        })
        return
      }
      if (index !== -1) {
        this.ruleForm.subwayStatus.splice(index, 1)
      }
    },
    removeDomain(item) {
      var index = this.ruleForm.domains.indexOf(item)
      if (this.ruleForm.domains.length <= 1) {
        this.$message({
          message: '请至少保留一条',
          type: 'warning'
        })
        return
      }
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1)
      }
    },
    /**
     * 周边配套
     */
    addDomain() {
      this.ruleForm.domains.push({
        value: '',
        content: '',
        key: Date.now(),
        type: 0
      })
    },
    handleGoBack() {
      this.updShow = false
      this.listShow = true
      this.currentRow = null
    },
    handleToUpdate() {
      // eslint-disable-next-line no-empty
      if (this.currentRow == null) {
        alert('请先选择一条数据再操作')
        return
      }
      this.updShow = true
      this.listShow = false
      this.ruleForm = this.currentRow
      /*      this.ruleForm.domains = [{
        value: '',
        content: '',
        key: '',
        type: 0,
        pid: ''
      }]*/
      this.ruleForm.domains = []
      /*      this.ruleForm.subwayStatus = [{
        value: '',
        content: '',
        key: '',
        type: 1,
        pid: ''
      }]*/
      this.ruleForm.subwayStatus = []
      this.ruleForm.sq = []
      this.ruleForm.subways = []
      this.ruleForm.buildingTypes = []
      this.ruleForm.property = []
      this.ruleForm.premisesTypes = []
      // 回显区县
      this.shch(this.ruleForm.province)
      this.quch(this.ruleForm.city)
      // 追加商圈地铁
      this.handleCircle(this.ruleForm.county)
      this.handleSubway()
      // 地铁追加回显
      var a = this.ruleForm.subway.split(',')
      for (var i = 0; i < a.length; i++) {
        this.ruleForm.subways.push(Number(a[i]))
      }
      // 商圈追加回显
      var b = this.ruleForm.commercialArea.split(',')
      for (var j = 0; j < a.length; j++) {
        this.ruleForm.sq.push(Number(b[j]))
      }
      // 建筑类型
      var c = this.ruleForm.buildingType.split(',')
      for (var k = 0; k < c.length; k++) {
        this.ruleForm.buildingTypes.push(c[k])
      }
      // 物业类型
      var m = this.ruleForm.premisesType.split(',')
      for (var x = 0; x < m.length; x++) {
        this.ruleForm.premisesTypes.push(m[x])
      }
      // 楼盘特色
      this.ruleForm.property = this.ruleForm.getProById
      // alert(JSON.stringify(this.ruleForm.facBackDtos))
      // alert(JSON.stringify(this.ruleForm.subBackDtos))
      for (var h = 0; h < this.ruleForm.facBackDtos.length; h++) {
        // eslint-disable-next-line no-unused-vars
        var fac = {
          value: this.ruleForm.facBackDtos[h].title,
          content: this.ruleForm.facBackDtos[h].content,
          pid: this.ruleForm.facBackDtos[h].premisesId
        }
        this.ruleForm.domains.push(fac)
      }
      // 交通情况
      this.ruleForm.property = this.ruleForm.getProById
      // alert(JSON.stringify(this.ruleForm.facBackDtos))
      // alert(JSON.stringify(this.ruleForm.subBackDtos))
      for (var v = 0; v < this.ruleForm.subBackDtos.length; v++) {
        // eslint-disable-next-line no-unused-vars
        var sub = {
          value: this.ruleForm.subBackDtos[v].title,
          content: this.ruleForm.subBackDtos[v].content,
          pid: this.ruleForm.subBackDtos[v].premisesId
        }
        this.ruleForm.subwayStatus.push(sub)
      }
    },
    getCharacteristic() {
      axios.get('http://localhost:8200/sys/premises/property/getListAll').then(res => {
        this.characterList = res.data
        console.log('楼盘特色：' + JSON.stringify(res))
      })
    },
    handleRowIndex(val) {
      this.currentRow = val
      console.log('选中的行值：' + JSON.stringify(this.currentRow))
    },
    handleInputPre() {
      this.$router.push('/wish/propertyManagement/fensan/realEstate/realEstateInput')
    },
    openMap: function(row) {
      if (row.longItude === null && row.latItude === null) {
        alert('暂未录入经纬度信息')
        return
      }
      // eslint-disable-next-line no-unused-vars
      this.mapIF = true
      const lng = row.longItude
      const lat = row.latItude
      this.center.lng = lng
      this.center.lat = lat
      this.pointIndex.lng = row.longItude
      this.pointIndex.lat = row.latItude
      this.mapDialog = true
      console.log('地图：' + this.center.lng + '------' + this.center.lat)
      console.log('点：' + this.pointIndex.lng + '------' + this.pointIndex.lat)
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.fm.pageSize = val
      this.getListAll()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.fm.pageNum = val
      this.getListAll()
    },
    getListAll() {
      this.loadding = true
      axios.post('http://localhost:8200/sys/pre/getlistAll', this.fm).then(res => {
        console.log(res)
        this.tableData = res.data.obj.list
        this.fm.pageNum = res.data.obj.pageNum
        this.fm.pageSize = res.data.obj.pageSize
        this.fm.total = res.data.obj.total
        this.loadding = false
      })
    },
    shch(id) {
      this.citys = []
      if (!id) {
        id = this.fm.province
      }
      axios.get('http://localhost:8200/sys/region/getArea?pid=' + id).then((response) => {
        this.citys = response.data.obj
        console.log('city:{}' + JSON.stringify(this.citys))
      })
    },
    quch(id) {
      this.countrys = []
      if (!id) {
        id = this.fm.city
      }
      axios.get('http://localhost:8200/sys/region/getArea?pid=' + id).then((response) => {
        this.countrys = response.data.obj
        console.log('countrys:{}' + JSON.stringify(this.countrys))
      })
      this.handleSubway()
    },
    handleSubway() {
      const id = this.ruleForm.province
      // 根据数据库ID
      if (id !== 2 && id !== 3 && id !== 10 && id !== 23) {
        this.getSub(this.ruleForm.city)
      } else {
        this.getSub(id)
      }
    },
    handleCircle(id) {
      if (!id) {
        id = this.ruleForm.county
      }
      axios.get('http://localhost:8200/sys/pre/businessCircleList?country=' + id).then(res => {
        this.circleList = res.data
        console.log('商圈：' + JSON.stringify(res))
      })
    },
    getSub(id) {
      axios.get('http://localhost:8200/sys/pre/getSubwayList?city=' + id).then(res => {
        this.subwayList = res.data
        console.log('地铁：' + JSON.stringify(res))
      })
    }
  }
}
</script>

<style>

/**
必须设置宽高
 */
.bm-view {
  width: 100%;
  height: 900px;
}
</style>
<template>
  <div>
    <div v-if="listShow">
      <el-form :inline="true" :model="fm" class="demo-form-inline" size="mini">
        <el-form-item>
          <el-input v-model="fm.name" placeholder="楼盘名称/楼盘地址" style="width: 200px" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="fm.premisesType" placeholder="请选择物业类型" clearable style="width: 100%">
            <el-option label="普通住宅" value="1">普通住宅</el-option>
            <el-option label="公寓" value="2">公寓</el-option>
            <el-option label="商住两用" value="3">商住两用</el-option>
            <el-option label="商业地产" value="4">商业地产</el-option>
            <el-option label="写字楼" value="5">写字楼</el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="province" :inline-message="true">
          <el-select v-model="fm.province" placeholder="省" clearable @change="shch">
            <el-option
              v-for="item in slist"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="city" :inline-message="true">
          <el-select v-model="fm.city" placeholder="市" clearable @change="quch">
            <el-option
              v-for="item in citys"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="county" :inline-message="true">
          <el-select v-model="fm.county" placeholder="区" clearable @change="handleCircle">
            <el-option
              v-for="item in countrys"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="getListAll">搜索</el-button>
          <el-button type="warning" @click="handleInputPre">新增楼盘</el-button>
          <el-button type="warning" @click="handleToUpdate">编辑</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="preTable"
        v-loading="loadding"
        highlight-current-row
        :data="tableData"
        style="width: 100%"
        @current-change="handleRowIndex"
      >
        <el-table-column
          prop="id"
          label="楼盘ID"
          width="180"
        />
        <el-table-column
          prop="name"
          label="楼盘名称"
        />
        <el-table-column
          label="楼盘图片"
        >
          <template v-slot="scope">
            <div v-for="item in scope.row.imageUrl" :key="item.id" align="left" style="width:10px;display: flex;">
              <el-popover
                style="display: flex"
                placement="top-end"
                trigger="hover"
              >
                <el-image :src="item.url" style="width: 200px;" :fit="fit" />
                <el-icon slot="reference" class="el-icon-picture-outline" />
              </el-popover>
            </div>
          </template>
          <template />
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="estate"
          label="物业管理公司"
        />
        <el-table-column
          label="地图地址"
        >
          <template v-slot="scope">
            <el-button type="text" @click="openMap(scope.row)">查看地图地址</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="fm.pageNum"
        :page-sizes="[15, 30, 45]"
        :page-size="fm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="fm.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        :visible.sync="mapDialog"
        width="70%"
      >
        <baidu-map class="bm-view" ak="ZoBKG4QXIkp2a6gdXPd2rQYf2dme8558" :center="center" :zoom="zoom" @ready="handler">
          <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-marker
            :position="pointIndex"
            :dragging="false"
            animation="BMAP_ANIMATION_BOUNCE"
          />
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
        </baidu-map>
      </el-dialog>

    </div>
    <div v-if="updShow">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div style="padding-left: 300px">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" size="mini">
              <el-form-item label="楼盘名称" prop="name" :inline-message="true">
                <el-input v-model="ruleForm.name" placeholder="楼盘名称" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="楼盘地址" prop="address" :inline-message="true">
                <el-input v-model="ruleForm.address" placeholder="楼盘地址" style="width: 300px" />
              </el-form-item>
              <el-form-item label="城市地区" prop="province" :inline-message="true">
                <el-select v-model="ruleForm.province" placeholder="省" @change="shch">
                  <el-option
                    v-for="item in slist"
                    :key="item.regionId"
                    :label="item.regionName"
                    :value="item.regionId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="city" :inline-message="true">
                <el-select v-model="ruleForm.city" placeholder="市" @change="quch">
                  <el-option
                    v-for="item in citys"
                    :key="item.regionId"
                    :label="item.regionName"
                    :value="item.regionId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="county" :inline-message="true">
                <el-select v-model="ruleForm.county" placeholder="区" @change="handleCircle">
                  <el-option
                    v-for="item in countrys"
                    :key="item.regionId"
                    :label="item.regionName"
                    :value="item.regionId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="商圈">
                <el-checkbox-group v-model="ruleForm.sq">
                  <el-checkbox v-for="city in circleList" :key="city.id" :label="city.id" :value="city.id">{{ city.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="地铁">
                <el-checkbox-group v-model="ruleForm.subways">
                  <el-checkbox v-for="subway in subwayList" :key="subway.id" :label="subway.id" :value="subway.id">{{ subway.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="建筑面积">
                <el-input v-model="ruleForm.proportion" placeholder="建筑面积" style="width: 200px" />平方米
              </el-form-item>
              <el-form-item label="建筑类型">
                <el-checkbox-group v-model="ruleForm.buildingTypes">
                  <el-checkbox label="1" name="1">平房</el-checkbox>
                  <el-checkbox label="2" name="2">塔楼</el-checkbox>
                  <el-checkbox label="3" name="3">塔楼结合</el-checkbox>
                  <el-checkbox label="4" name="4">底层</el-checkbox>
                  <el-checkbox label="5" name="5">多层</el-checkbox>
                  <el-checkbox label="6" name="6">高层</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="社区类型" style="width: 200px">
                <el-select v-model="ruleForm.communityType" placeholder="请选择社区类型">
                  <el-option label="经济社区" value="1">经济社区</el-option>
                  <el-option label="政治社区" value="2">政治社区</el-option>
                  <el-option label="文化社区" value="3">文化社区</el-option>
                  <el-option label="军事社区" value="4">军事社区</el-option>
                  <el-option label="特殊社区" value="5">特殊社区</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="物业类型">
                <el-checkbox-group v-model="ruleForm.premisesTypes">
                  <el-checkbox label="1" name="1">普通住宅</el-checkbox>
                  <el-checkbox label="2" name="2">公寓</el-checkbox>
                  <el-checkbox label="3" name="3">商住两用</el-checkbox>
                  <el-checkbox label="4" name="4">商业地产</el-checkbox>
                  <el-checkbox label="5" name="5">写字楼</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="楼盘特色">
                <el-checkbox-group v-model="ruleForm.property">
                  <el-checkbox v-for="subway in characterList" :key="subway.id" :label="subway.id">{{ subway.premisesProperty }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="容积率">
                <el-input v-model="ruleForm.grossPlotRatio" placeholder="容积率" style="width: 200px" />平方米
              </el-form-item>
              <el-form-item label="得房率">
                <el-input v-model="ruleForm.efficiency" placeholder="得房率" style="width: 200px" />%
              </el-form-item>
              <el-form-item label="绿化率">
                <el-input v-model="ruleForm.greenCoverage" placeholder="绿化率" style="width: 200px" />%
              </el-form-item>
              <el-form-item label="楼栋数">
                <el-input v-model="ruleForm.buildingCount" placeholder="楼栋数" style="width: 200px" />栋
              </el-form-item>
              <el-form-item label="开发商">
                <el-input v-model="ruleForm.developer" placeholder="开发商" style="width: 400px" />
              </el-form-item>
              <el-form-item label="物业管理公司">
                <el-input v-model="ruleForm.estate" placeholder="物业管理公司" style="width: 400px" />
              </el-form-item>
              <el-form-item label="楼盘地址">
                经度：<el-input v-model="ruleForm.longItude" readonly style="width: 200px" />
                纬度：<el-input v-model="ruleForm.latItude" readonly style="width: 200px" />
                <el-button @click="updMapDialog=true">点击选择</el-button>
              </el-form-item>
              <el-form-item label="楼盘简介">
                <el-input v-model="ruleForm.introduce" style="width: 500px" type="textarea" :rows="2" placeholder="楼盘简介" />
              </el-form-item>
              <el-form-item label="周边配套">
                <el-button icon="el-icon-plus" type="warning" @click="addDomain">新 增</el-button>
              </el-form-item>
              <el-form-item
                v-for="(domain, index) in ruleForm.domains"
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
              >
                标题：<el-input v-model="domain.value" style="width: 200px;" />
                内容：<el-input v-model="domain.content" style="width: 200px;" />
                <el-button type="danger" icon="el-icon-minus" @click.prevent="removeDomain(domain)" />
              </el-form-item>
              <el-form-item label="交通情况">
                <el-button icon="el-icon-plus" type="warning" @click="addSubway">新 增</el-button>
              </el-form-item>
              <el-form-item
                v-for="(domain, index) in ruleForm.subwayStatus"
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
              >
                标题：<el-input v-model="domain.value" style="width: 200px;" />
                内容：<el-input v-model="domain.content" style="width: 200px;" />
                <el-button type="danger" icon="el-icon-minus" @click.prevent="removeSubway(domain)" />
              </el-form-item>
              <el-form-item>
                <!--            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="相册管理" name="second">
          <div style="padding-left: 50px">
            <div v-for="item in ablums" :key="item.id">
              <h3>{{ item.albumType }}：</h3>
              <div class="uplDiv" @click="getAlbumIndex(item.id)">
                <el-upload
                  action="http://localhost:8200/hou/upload/pic"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <el-input v-model="ruleForm.imageUrl[item.id]" hidden />
                  <img width="100%" :src="ruleForm.imageUrl" alt="">
                </el-dialog>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div align="center">
        <el-button type="warning" @click="handleGoBack">返回</el-button>
        <el-button slot="reference" type="warning" size="mini" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </div>

    <el-dialog
      :visible.sync="updMapDialog"
      width="70%"
    >
      <baidu-map class="bm-view" ak="ZoBKG4QXIkp2a6gdXPd2rQYf2dme8558" :center="updCenter" :zoom="updZoom" @ready="handler">
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" @dblclick="getIndex">
          <bm-label content="双击选择" :label-style="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}" />
        </bm-marker>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
      </baidu-map>
    </el-dialog>

  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue' // 百度地图组件
import BmMarker from 'vue-baidu-map/components/overlays/Marker' // 点
import BmScale from 'vue-baidu-map/components/controls/Scale' // 缩放
import BmNavigation from 'vue-baidu-map/components/controls/Navigation' // 比例尺
import BmCityList from 'vue-baidu-map/components/controls/CityList' // 城市列表

import axios from 'axios'

export default {
  name: 'PreList',
  components: {
    BaiduMap,
    BmMarker,
    BmScale,
    BmNavigation,
    BmCityList
  },
  data() {
    return {
      updCenter: { lng: 116.404, lat: 39.915 },
      updZoom: 15,
      updMapDialog: false,
      ruleForm: {
        subways: [],
        sq: [],
        buildingTypes: [],
        property: [],
        premisesTypes: [],
        subwayStatus: [{
          value: '',
          content: '',
          key: '',
          type: 1
        }],
        domains: [{
          value: '',
          content: '',
          key: '',
          type: 0
        }]
      },
      activeName: 'first',
      listShow: true,
      updShow: false,
      updDialog: false,
      mapIF: false,
      circleList: [],
      subwayList: [],
      pointIndex: {
        lng: '',
        lat: ''
      },
      slist: [],
      citys: [],
      countrys: [],
      center: { lng: 0, lat: 0 },
      zoom: 3,
      mapDialog: false,
      loadding: false,
      tableData: [],
      fm: {
        pageNum: 1,
        pageSize: 15
      },
      currentRow: null,
      characterList: [],
      rules: {
        name: [
          { required: true, message: '请输入楼盘名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入楼盘地址', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        county: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    axios.get('http://localhost:8200/sys/region/getArea?pid=' + 1).then((response) => {
      this.slist = response.data.obj
      console.log('slist:{}' + JSON.stringify(this.slist))
    })
    this.getListAll()
    this.getCharacteristic()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert(JSON.stringify(this.ruleForm.imageUrl))
          if (this.ruleForm.imageUrl.length <= 0) {
            // this.dialogVisible=true;
            this.$confirm('当前未上传图片, 是否继续?', {
              confirmButtonText: '上传图片',
              cancelButtonText: '继续添加',
              type: 'warning'
            }).then(() => {
              this.activeName = 'second'
            }).catch(() => {

            })
            // eslint-disable-next-line no-empty
          } else {
          }
          console.log(this.ruleForm)
        } else {
          this.$message({
            message: '请输入!',
            type: 'error'
          })
          return false
        }
      })
    },
    getIndex(e) {
      console.log('经度:' + e.point.lng)
      console.log('纬度:' + e.point.lat)
      this.ruleForm.longItude = e.point.lng
      this.ruleForm.latItude = e.point.lat
      this.updMapDialog = false
      this.$message({
        message: '选择成功',
        type: 'success'
      })
      /* console.log("type:"+type)
      console.log("target:"+target)
      console.log("lat:"+point.lat)
      console.log("pixel:"+pixel)*/
    },
    /**
     * 交通情况
     *
     * */
    addSubway() {
      this.ruleForm.subwayStatus.push({
        value: '',
        content: '',
        key: Date.now(),
        type: 1
      })
    },
    removeSubway(item) {
      var index = this.ruleForm.subwayStatus.indexOf(item)
      if (this.ruleForm.subwayStatus.length <= 1) {
        this.$message({
          message: '请至少保留一条',
          type: 'warning'
        })
        return
      }
      if (index !== -1) {
        this.ruleForm.subwayStatus.splice(index, 1)
      }
    },
    removeDomain(item) {
      var index = this.ruleForm.domains.indexOf(item)
      if (this.ruleForm.domains.length <= 1) {
        this.$message({
          message: '请至少保留一条',
          type: 'warning'
        })
        return
      }
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1)
      }
    },
    /**
     * 周边配套
     */
    addDomain() {
      this.ruleForm.domains.push({
        value: '',
        content: '',
        key: Date.now(),
        type: 0
      })
    },
    handleGoBack() {
      this.updShow = false
      this.listShow = true
      this.currentRow = null
    },
    handleToUpdate() {
      // eslint-disable-next-line no-empty
      if (this.currentRow == null) {
        alert('请先选择一条数据再操作')
        return
      }
      this.updShow = true
      this.listShow = false
      this.ruleForm = this.currentRow
      /*      this.ruleForm.domains = [{
        value: '',
        content: '',
        key: '',
        type: 0,
        pid: ''
      }]*/
      this.ruleForm.domains = []
      /*      this.ruleForm.subwayStatus = [{
        value: '',
        content: '',
        key: '',
        type: 1,
        pid: ''
      }]*/
      this.ruleForm.subwayStatus = []
      this.ruleForm.sq = []
      this.ruleForm.subways = []
      this.ruleForm.buildingTypes = []
      this.ruleForm.property = []
      this.ruleForm.premisesTypes = []
      // 回显区县
      this.shch(this.ruleForm.province)
      this.quch(this.ruleForm.city)
      // 追加商圈地铁
      this.handleCircle(this.ruleForm.county)
      this.handleSubway()
      // 地铁追加回显
      var a = this.ruleForm.subway.split(',')
      for (var i = 0; i < a.length; i++) {
        this.ruleForm.subways.push(Number(a[i]))
      }
      // 商圈追加回显
      var b = this.ruleForm.commercialArea.split(',')
      for (var j = 0; j < a.length; j++) {
        this.ruleForm.sq.push(Number(b[j]))
      }
      // 建筑类型
      var c = this.ruleForm.buildingType.split(',')
      for (var k = 0; k < c.length; k++) {
        this.ruleForm.buildingTypes.push(c[k])
      }
      // 物业类型
      var m = this.ruleForm.premisesType.split(',')
      for (var x = 0; x < m.length; x++) {
        this.ruleForm.premisesTypes.push(m[x])
      }
      // 楼盘特色
      this.ruleForm.property = this.ruleForm.getProById
      // alert(JSON.stringify(this.ruleForm.facBackDtos))
      // alert(JSON.stringify(this.ruleForm.subBackDtos))
      for (var h = 0; h < this.ruleForm.facBackDtos.length; h++) {
        // eslint-disable-next-line no-unused-vars
        var fac = {
          value: this.ruleForm.facBackDtos[h].title,
          content: this.ruleForm.facBackDtos[h].content,
          pid: this.ruleForm.facBackDtos[h].premisesId
        }
        this.ruleForm.domains.push(fac)
      }
      // 交通情况
      this.ruleForm.property = this.ruleForm.getProById
      // alert(JSON.stringify(this.ruleForm.facBackDtos))
      // alert(JSON.stringify(this.ruleForm.subBackDtos))
      for (var v = 0; v < this.ruleForm.subBackDtos.length; v++) {
        // eslint-disable-next-line no-unused-vars
        var sub = {
          value: this.ruleForm.subBackDtos[v].title,
          content: this.ruleForm.subBackDtos[v].content,
          pid: this.ruleForm.subBackDtos[v].premisesId
        }
        this.ruleForm.subwayStatus.push(sub)
      }
    },
    getCharacteristic() {
      axios.get('http://localhost:8200/sys/premises/property/getListAll').then(res => {
        this.characterList = res.data
        console.log('楼盘特色：' + JSON.stringify(res))
      })
    },
    handleRowIndex(val) {
      this.currentRow = val
      console.log('选中的行值：' + JSON.stringify(this.currentRow))
    },
    handleInputPre() {
      this.$router.push('/wish/propertyManagement/fensan/realEstate/realEstateInput')
    },
    openMap: function(row) {
      if (row.longItude === null && row.latItude === null) {
        alert('暂未录入经纬度信息')
        return
      }
      // eslint-disable-next-line no-unused-vars
      this.mapIF = true
      const lng = row.longItude
      const lat = row.latItude
      this.center.lng = lng
      this.center.lat = lat
      this.pointIndex.lng = row.longItude
      this.pointIndex.lat = row.latItude
      this.mapDialog = true
      console.log('地图：' + this.center.lng + '------' + this.center.lat)
      console.log('点：' + this.pointIndex.lng + '------' + this.pointIndex.lat)
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.fm.pageSize = val
      this.getListAll()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.fm.pageNum = val
      this.getListAll()
    },
    getListAll() {
      this.loadding = true
      axios.post('http://localhost:8200/sys/pre/getlistAll', this.fm).then(res => {
        console.log(res)
        this.tableData = res.data.obj.list
        this.fm.pageNum = res.data.obj.pageNum
        this.fm.pageSize = res.data.obj.pageSize
        this.fm.total = res.data.obj.total
        this.loadding = false
      })
    },
    shch(id) {
      this.citys = []
      if (!id) {
        id = this.fm.province
      }
      axios.get('http://localhost:8200/sys/region/getArea?pid=' + id).then((response) => {
        this.citys = response.data.obj
        console.log('city:{}' + JSON.stringify(this.citys))
      })
    },
    quch(id) {
      this.countrys = []
      if (!id) {
        id = this.fm.city
      }
      axios.get('http://localhost:8200/sys/region/getArea?pid=' + id).then((response) => {
        this.countrys = response.data.obj
        console.log('countrys:{}' + JSON.stringify(this.countrys))
      })
      this.handleSubway()
    },
    handleSubway() {
      const id = this.ruleForm.province
      // 根据数据库ID
      if (id !== 2 && id !== 3 && id !== 10 && id !== 23) {
        this.getSub(this.ruleForm.city)
      } else {
        this.getSub(id)
      }
    },
    handleCircle(id) {
      if (!id) {
        id = this.ruleForm.county
      }
      axios.get('http://localhost:8200/sys/pre/businessCircleList?country=' + id).then(res => {
        this.circleList = res.data
        console.log('商圈：' + JSON.stringify(res))
      })
    },
    getSub(id) {
      axios.get('http://localhost:8200/sys/pre/getSubwayList?city=' + id).then(res => {
        this.subwayList = res.data
        console.log('地铁：' + JSON.stringify(res))
      })
    }
  }
}
</script>

<style>

/**
必须设置宽高
 */
.bm-view {
  width: 100%;
  height: 900px;
}
</style>
